<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../../../iron-icons/iron-icons.html">

<link rel="import" href="../../../paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="../../../paper-header-panel/paper-header-panel.html">
<link rel="import" href="../../../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../../paper-item/paper-item.html">
<link rel="import" href="../../../paper-menu/paper-menu.html">
<link rel="import" href="../../../paper-toolbar/paper-toolbar.html">

<!--

Left Nav + List + Detail

 -->
<dom-module id="x-app">

  <link rel="import" type="css" href="x-app.css">

  <template>

    <paper-drawer-panel id="navDrawerPanel" responsive-width="1280px">

      <div class="nav" drawer>
        <!-- Nav Content -->
      </div>

      <paper-drawer-panel id="mainDrawerPanel" class="main-drawer-panel" main responsive-width="600px"
          drawer-width="[[_computeListWidth(_isMobile)]]" drawer-toggle-attribute="list-toggle"
          narrow="{{_isMobile}}">

        <paper-header-panel class="list-panel" drawer>

          <!-- List Toolbar -->
          <paper-toolbar>
            <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
          </paper-toolbar>

          <!-- List -->
          <paper-menu class="list" on-iron-activate="_listTap">
            <paper-item></paper-item>
            <paper-item></paper-item>
            <paper-item></paper-item>
            <paper-item></paper-item>
            <paper-item></paper-item>
            <paper-item></paper-item>
            <paper-item></paper-item>
            <paper-item></paper-item>
            <paper-item></paper-item>
            <paper-item></paper-item>
            <paper-item></paper-item>
            <paper-item></paper-item>
            <paper-item></paper-item>
            <paper-item></paper-item>
            <paper-item></paper-item>
            <paper-item></paper-item>
            <paper-item></paper-item>
            <paper-item></paper-item>
            <paper-item></paper-item>
            <paper-item></paper-item>
          </paper-menu>

        </paper-header-panel>

        <paper-header-panel class="content-panel" main>

          <!-- Main Toolbar -->
          <paper-toolbar>
            <paper-icon-button icon="arrow-back" list-toggle></paper-icon-button>
          </paper-toolbar>

          <!-- Main Content -->
          <div class="content"></div>

        </paper-header-panel>

      </paper-drawer-panel>

    </paper-drawer-panel>

  </template>

  <script>

    Polymer({

      is: 'x-app',

      _computeListWidth: function(isMobile) {
        // when in mobile screen size, make the list be 100% width to cover the whole screen
        return isMobile ? '100%' : '33%';
      },

      _listTap: function() {
        this.$.mainDrawerPanel.closeDrawer();
      }

    });

  </script>

</dom-module>
